<template>
  <div class="container-user">
    <animated-banner style="height: 215px">
      <div class="top">
        <el-card>
          <div class="el-card-container">
            <x-avart
              :src="userInfor.img_url"
              :progress="{ theme: 'orange', percent: '60' }"
              width="70px"
              height="70px"
              num
              :grade="userInfor.vipGrade"
            ></x-avart>
            <div class="descrip">
              <lay-tooltip content="假装这里有文字提示" trigger="hover" :is-dark="false" isAutoShow>
                <div class="name">{{ userInfor.nickname }}</div>
              </lay-tooltip>
              <div class="expression">你好</div>
              <w-button size="xs" @click="palyVisible = !palyVisible">
                {{ handleText }}
              </w-button>
              <div class="last-topup" v-if="userInfor.vipGrade.vipEndTime">
                {{userInfor.vipGrade.vip?'到期时间':'上次到期'}}:{{ formatDate(new Date(userInfor.vipGrade.vipEndTime), 'Y-m-d') }}
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </animated-banner>
    <lay-tab type="card" v-model="current7" tabPosition="left" class="bottom">
      <lay-tab-item title="编辑资料" id="1">
        <div style="padding: 10px">
          <page-form :config="infoConfig" :formData="infoData"></page-form>
          <w-button @click="onSubmit('info')" type="default">保存</w-button>
        </div>
      </lay-tab-item>
      <lay-tab-item title="我的收藏" id="2">
        <div style="height: 100px"><list-scroll></list-scroll></div>
      </lay-tab-item>
      <lay-tab-item title="修改密码" id="3">
        <div style="padding: 10px">
          <page-form :config="accountConfig" :formData="accountData"></page-form>
          <w-button @click="onSubmit('password')" type="default">保存</w-button>
        </div>
      </lay-tab-item>
      <lay-tab-item title="修改头像" id="4">
        <div style="padding: 10px">
          <w-upload @success="onSucces"></w-upload>
          <w-button @click="onSubmit('avater')">保存</w-button>
        </div>
      </lay-tab-item>
    </lay-tab>
    <paly-dialog :open="palyVisible"></paly-dialog>
  </div>
</template>

<script setup>
import animatedBanner from './components/animated-banner/animatedBanner.vue'
import { onMounted, reactive, ref, defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import { userInfor } from '@/hooks/userInfor'
import { formatDate } from '@/utils/index'
import md5 from 'js-md5'
import palyDialog from './components/paly-dialog/index.vue'
import { infoConfig, accountConfig } from './config'
import * as axiosApi from './api'

defineComponent({
  animatedBanner,
  palyDialog
})

const store = useStore()
const current7 = ref('1')
const palyVisible = ref(false) // 仅仅是做一个更新，true或false并无意义
const infoData = reactive({
  ...userInfor.value
})
const accountData = reactive({
  account: userInfor.value.account,
  password: '00000000'
})

let file = {}

onMounted(() => {
  console.log('onMounted')
})

function onSucces(data) {
  file = data
}

const handleText = computed(() => {
  if (userInfor.value.vipGrade.vip) {
    if (new Date() > new Date(userInfor.value.vipGrade.vipEndTime)) {
      return '成为尊贵的vip'
    } else {
      return '续费'
    }
  } else {
    return '成为尊贵的vip'
  }
})

function onSubmit(type) {
  if (type === 'info') {
    // 编辑资料
    // 对地区选择框做处理
    axiosApi.setUserInfor({ ...infoData, city: infoData.city.split('/') }).then(() => {
      $message('保存成功')
      store.dispatch('updateInfor')
    })
  } else if (type === 'password') {
    // 修改账号密码
    if (accountData.password === '00000000') return $message('保存成功') //什么也没改，但给个提示
    let params = { ...accountData }
    params.password = md5(params.password)
    axiosApi.modifyPassword(params).then(() => {
      $message('保存成功')
    })
  } else if (type === 'avater') {
    if (!file.filePath) return $message('保存失败', 'error')
    infoData.img_url = file.filePath
    axiosApi.setUserInfor({...infoData,city: infoData.city.split('/')}).then(() => {
      $message('保存成功')
      store.dispatch('updateInfor')
    })
  }
}
</script>

<style lang="scss" scoped>
.container-user {
  display: flex;
  flex-direction: column;
  .top {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
    height: 100%;
    .el-card {
      min-width: 255px;
      backdrop-filter: blur(5px);
      border: 0;
      background: transparent;
      box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.32);
    }
    .el-card-container {
      display: flex;
      height: 102px;
    }
    .user-img {
      position: relative;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid #fff;
      background-color: #fff;
      .el-image {
        width: 105%;
        height: 105%;
      }
    }
    .descrip {
      margin-left: 25px;
      .name {
        // height: 55px;
        // line-height: 55px;
        line-height: 30px;
        max-width: 120px;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 30px;
        font-weight: 700;
      }
      .expression {
        font-size: 15px;
      }
      .last-topup {
        font-size: 12px;
        color: #fff;
      }
    }
  }
  .bottom {
    flex: 1;
    margin: 0;
  }
}
</style>
